<!DOCTYPE html>

<head>
    <style>
        #box {
            width: 100px;
            height: 200px;
            background-color: lightblue;
            border: 10px solid pink;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script src="../include.js"></script>
<script>
    asyncTest(async done => {
        const box = document.getElementById("box");

        let resolve = null;
        function createResizeObserverPromise() {
            return new Promise(r => {
                resolve = r;
            });
        }

        const resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                const { width, height } = entry.contentRect;
                const borderBoxSize = entry.borderBoxSize[0];
                const contentBoxSize = entry.contentBoxSize[0];
                const deviceBoxSize = entry.devicePixelContentBoxSize[0];
                let string = `contentSize: ${width}px x ${height}px`;
                string += `; borderBoxSize [inline=${borderBoxSize.inlineSize}px, block=${borderBoxSize.blockSize}px]`;
                string += `; contentBoxSize [inline=${contentBoxSize.inlineSize}px, block=${contentBoxSize.blockSize}px]`;
                string += `; deviceBoxSize [inline=${deviceBoxSize.inlineSize}px, block=${deviceBoxSize.blockSize}px]`;
                println(string);
            }

            if (resolve) resolve();
        });

        let observerCallbackInvocation = createResizeObserverPromise();
        resizeObserver.observe(box, { box: "border-box" });
        await observerCallbackInvocation;

        box.style.borderTopWidth = "50px";

        observerCallbackInvocation = createResizeObserverPromise();
        await observerCallbackInvocation;

        done();
    });
</script>
